<template>
  <view>
    <!-- 头部 -->
    <view class="flex align-center py-4 px-2 border-bottom border-light">
      <view>
        <image :src="img" style="width: 180rpx; height: 180rpx" class="rounded-circle"></image>
      </view>
      <view class="ml-2 flex-1 flex flex-column">
        <view class="flex justify-center align-center">
          <view
            class="flex-1 flex flex-column align-center"
            v-for="(item, index) in counts"
            :key="index"
          >
            <text class="font-lg font-weight-bold">{{ item.num }}</text>
            <text class="text-muted">{{ item.name }}</text>
          </view>
        </view>
        <view
          class="mt-3 justify-center align-center"
          v-if="user.userinfo.username != item11.toname"
        >
          <button
            class="rounded;"
            style="background-color: #ff4a6a; color: #ffffff; width: 400rpx; border: none"
            plain
            @click="doFollow"
            v-if="item11.isfollow == 'false'"
          >
            关注
          </button>
          <!-- 已关注 -->
          <button
            class="rounded;"
            style="background-color: #83ff4a7b; color: #ffffff; width: 400rpx; border: none"
            plain
            @click="doFollow1"
            v-else
          >
            已关注
          </button>
        </view>
      </view>
    </view>
    <!-- tab -->
    <view class="flex align-center" style="height: 100rpx">
      <view
        class="flex flex-1 p-2 justify-center align-center"
        v-for="(item, index) in tabList"
        :key="index"
        @click="tabChange(index)"
        :class="tabIndex === index ? 'font-lg font-weight-bold text-main' : 'font-md'"
        >{{ item.name }}</view
      >
    </view>
    <!-- tab info -->
    <template v-if="tabIndex === 0">
      <view class="animated fast fadeIn">
        <view class="p-3 border-bottom border-light">
          <view class="font-lg">账号信息</view>
          <view class="mt-3">账号年龄：{{ userinfo.regtime }}</view>
          <view>账号ID：{{ userinfo.username }}</view>
        </view>
        <view class="p-3 border-bottom border-light">
          <view class="font-lg">个人信息</view>
          <view class="mt-3">手机号：{{ userinfo.phone }}</view>
          <view>邮箱：{{ userinfo.email }}</view>
          <view>地址：{{ userinfo.path }}</view>
        </view>
      </view>
    </template>
    <template v-else>
      <view class="animated fast fadeIn">
        <common-list
          v-for="(item, index) in list"
          :key="index"
          :item="item"
          :index="index"
          @follow="follow"
          @doSupport="doSupport"
          :isdetail="false"
          :isgeren="false"
        ></common-list>
        <divider></divider>
        <loadmore v-if="list.length > 10" :loadmore="loadmore1"></loadmore>
      </view>
    </template>
  </view>
</template>

<script lang="ts" setup>
import commonList from '@/components/common-list/index'
import loadmore from '@/components/common/loadmore'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { getTopicListAPI, guanzhushequAPI, getTopicListAPI2 } from '@/services/shequ'
import { ref, computed, getCurrentInstance } from 'vue'
import { guanzhuStore, myStore } from '@/stores'
const user = myStore()
const { proxy } = getCurrentInstance() as any
const guanzhu = guanzhuStore()
console.log(user.userinfo, 'user')

// 个人主页信息
const tabIndex = ref(0)
const counts = ref([
  {
    name: '帖子',
    num: 0,
  },
  {
    name: '粉丝',
    num: 0,
  },
  {
    name: '关注',
    num: 0,
  },
])

const tabList = ref<any>([
  {
    name: '主页',
  },
  {
    name: '帖子',
    list: [
      {
        title: '标题',
        content: '内容',
        time: '2021-01-01',
        img: '../../static//images/loading 加载中_爱给网_aigei_com.gif',
        isfollow: 'false',
        name: '名称',
        support: {
          type: 'support',
          support_count: 1,
          unsupport_count: 2,
        },
        comment_count: 2,
        share_num: 2,
      },
    ],
    page: 1,
    loadmore: '上拉加载更多',
  },
])
// index获取该对应的idindex
const index = ref<any>(0)
const img = ref<any>('')
const item11 = ref<any>({})
onLoad(async (e: any) => {
  // 监听全局关注和顶踩事件
  console.log(e)
  console.log(JSON.parse(e.gerenail), '我看看111')
  item11.value = JSON.parse(e.gerenail)
  // 初始化操作
  //
  if (e.gerenail) {
    index.value = e.index
    img.value =  JSON.parse(e.gerenail).picAddress
    userinfo.value.path = JSON.parse(e.gerenail).path
    userinfo.value.regtime = item11.value.create_time
    userinfo.value.username = JSON.parse(e.gerenail).username
  }
  // tabList.value[1].list = JSON.parse(e.gerenail)
  // 获取接口数据
  await getTopicListAPI1()
  await getTopicListAPI22()
  // 计算出帖子数量
  counts.value[0].num = tabList.value[1].list.length
})
// 计算属性
// 帖子数据
const list = computed(() => {
  return tabList.value[tabIndex.value].list
})
const loadmore1 = computed(() => {
  return tabList.value[tabIndex.value].loadmore
})
// 主页数据
const userinfo = ref({
  username: '',
  phone: user.userinfo.phone,
  email: user.userinfo.email,
  path: item11.value.path,
  regtime: '',
})

const user_id = ref(0) //账号id
// 点击切换状态
const tabChange = (index) => {
  tabIndex.value = index
  if (index === 0) return
}
// follow
const follow = (index: number, index1: number, item) => {
  console.log('78787878787', index)
  console.log(list.value[index].isfollow, '21312312312321')
  list.value.map((obj) => {
    if (item.toname === obj.toname) {
      obj.isfollow = obj.isfollow === 'true' ? 'false' : 'true'
    }
  })
  item11.value.isfollow = item11.value.isfollow === 'true' ? 'false' : 'true'
  console.log(list.value[index].isfollow, '54555555555')
}
// 判断点赞等
//doSupport
const doSupport = (e) => {
  //
  let msg = e.type === 'support' ? '支持' : '不支持'
  // 如果用户已经支持了，就不能再点击   这里list报红是没有错误
  if (list.value[e.index].support.type === e.type) return
  // 如果之前已经支持了，按了不支持，就是支持减1，不支持加一
  if (list.value[e.index].support.type === 'support' && e.type === 'unsupport') {
    list.value[e.index].support.support_count--
    list.value[e.index].support.unsupport_count++
  } else if (list.value[e.index].support.type === 'unsupport' && e.type === 'support') {
    list.value[e.index].support.support_count++
    list.value[e.index].support.unsupport_count--
  } else {
    list.value[e.index].support[e.type + '_count']++
  }
  list.value[e.index].support.type = e.type
  // 点赞
  uni.showToast({
    title: msg + '成功',

    duration: 1000,
  })
  // list.value[e.index].support.type = e.type
  // list.value[e.index].support[e.type + '_count']++
}
// // 触底的生命周期事件上拉用
// onReachBottom(async () => {
//   // 获取数据
//   // if (!this['firstLoad' + (index + 1)]) {
//   //   this.getDate()
//   // }
//   console.log('上拉加载更多')
//   loadmore11()
// })
// // 上拉加载事件函数
// const loadmore11 = () => {
//   console.log('触发了')

//   // 判断是否处于可加载状态
//   if (loadmore1.value !== '上拉加载更多') return
//   // 加载数据
//   tabList.value[tabIndex.value].loadmore = '加载中...'
//   setTimeout(() => {
//     tabList.value[tabIndex.value].list = [...tabList.value[tabIndex.value].list]
//     tabList.value[tabIndex.value].loadmore = '上拉加载更多'
//   }, 1000)
//   uni.showToast({
//     title: '加载中',
//     icon: 'loading',
//     duration: 1000,
//   })
// }
// 取消关注函数
const doFollow1 = () => {
  // 确认取消关注吗
  uni.showModal({
    title: '确定取消关注吗',
    content: '取消关注后，你将不再收到该用户的消息',
    confirmText: '取消关注',
    cancelText: '取消',
    success: async (res) => {
      if (res.confirm) {
        guanzhu.guanzhuid('false')
        guanzhu.itemid(item11.value)
        // 发送请求关注数据
        await guanzhushequAPI({
          item: item11.value,
          user: user.userinfo,
        })
        guanzhu1.value = true
        follow(1, 2, item11.value)
        // 确认取消关注
        uni.showToast({
          title: '取消关注成功',
        })
      }
    },
  })

  getTopicListAPI1()
}
//关注
const guanzhu1 = ref<any>(false)
const doFollow = () => {
  // 确认关注吗
  uni.showModal({
    title: '确定关注吗',
    content: '确认关注后，你将收到该用户的消息',
    confirmText: '确定',
    cancelText: '取消',
    success: async (res) => {
      if (res.confirm) {
        guanzhu.guanzhuid('true')
        guanzhu.itemid(item11.value)
        // 发送请求关注数据
        await guanzhushequAPI({
          item: item11.value,
          user: user.userinfo,
        })
        guanzhu1.value = false
        follow(1, 2, item11.value)
        // 确认取消关注
        uni.showToast({
          title: '关注成功',
        })
      }
    },
  })

  getTopicListAPI1()
}
// 刷新接口
const getTopicListAPI1 = async () => {
  // 获取帖子个人中心
  let res = await getTopicListAPI({ item: item11.value, user: user.userinfo })
  console.log(res, '帖子信息')
  tabList.value[1].list = res.data
}
//getTopicListAPI22
const getTopicListAPI22 = async () => {
  // 获取帖子个人中心
  let res = await getTopicListAPI2({ item: item11.value, user: user.userinfo })
  console.log(res, '帖子信息')
  counts.value[1].num = res.fengsi
  counts.value[2].num = res.guanzhu
}
</script>

<style lang="scss">
@import url('../../static/assets/wxss/iconfont.css');
</style>
